<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all" />
    <title>公司员工列表</title>
</head>
<body>
<div style="width: 95%;height: 95%;margin: auto">
    <div>
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">姓名:</lable>
                    <div class="layui-input-inline" style="width: 110px">
                        <input class="layui-input" id="name" placeholder="搜索员工姓名">
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">生日:</lable>
                    <div class="layui-input-inline" style="width: 110px">
                        <input class="layui-input" id="birth" placeholder="生日/月份" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">部门:</lable>
                    <div class="layui-input-inline" style="width: 110px">
                        <select id="deptId">
                            <option value="">部门</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">状态:</lable>
                    <div class="layui-input-inline" style="width: 110px">
                        <select id="flag">
                            <option value="">状态</option>
                            <option value="1">正常</option>
                            <option value="2">无效</option>
                        </select>
                    </div>
                </div>
                <button class="layui-btn layui-icon layui-icon-search" type="button" id="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-primary layui-icon layui-icon-refresh-1" type="reset" >重置</button>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green" />
    <div>
        <table id="dataTable" lay-filter="dataTableFilter"/>
    </div>
</div>

<script type="text/html" id="headBtns">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
</script>

<script type="text/html" id="rowBtns">
    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" lay-event="role">
        <i class="layui-icon">&#xe770;</i> 分配角色
    </button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">
        <i class="layui-icon">&#xe640;</i> 离职
    </button>
</script>

<script type="text/html" id="editTpl">
    <div style="margin-top: 20px;margin-left: 30px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="name" placeholder="名称" lay-verify="required" lay-reqText="员工名称不能为空"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="phone" placeholder="手机号" lay-verify="required|phone" lay-reqText="手机号"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="password" placeholder="密码" lay-verify="required" value="123456" lay-reqText="密码不能为空"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="editBirth" name="birth" placeholder="生日" lay-verify="required" readonly lay-reqText="员工生日不能为空"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline">
                    <select id="editDeptId" name="deptId" lay-verify="required" lay-reqText="员工部门不能为空" >
                        <option value="">部门</option>
                    </select>
                </div>
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>
<script type="text/html" id="editRole">
    <div style="margin-top: 20px;margin-left: 30px">
        <form class="layui-form layui-form-pane"   lay-filter="editFormFilter">
            <div class="layui-form-item" id="rolesItem">
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer','form','laydate'],function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        laydate.render({elem:'#birth',type:'month',format:'MM'});
        function getAllDept(param) {
            var data = null;
            $.ajax({
                url:"${pageContext.request.contextPath}/comp/depart/list.do",
                data:param,
                async:false,
                success:function (rs) {
                    if (rs.code != 200){
                        layer.msg(rs.msg);
                        return false;
                    }
                    data = rs.data;
                }
            });
            return data;
        }

        function renderSelect(id,data) {
            var select = $(id);
            var html = "";
            $.each(data,function (index,value) {
                html = html + "<option value='"+value.id+"'>"+value.deptName+"</option>";
            })
            select.append(html);
            form.render("select");
        }

        function  initDept(id,param){
            var  data = getAllDept(param);
            renderSelect(id,data);
        }

        initDept("#deptId",{flag:1});

        var t = table.render({
            id:"dataTableId",
            elem:"#dataTable",
            toolbar:'#headBtns',
            page:true,
            height:500,
            url:'${pageContext.request.contextPath}/comp/user/page.do',
            response:{
                "statusCode": 200
            },
            parseData:function(rs){
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                return {
                    "code": rs.code, //解析接口状态
                    "msg": rs.msg, //解析提示文本
                    "count": rs.data.count, //解析数据长度
                    "data": rs.data.data //解析数据列表
                }
            },
            cols:[[
                {field:'id',title:'ID',width:80},
                {field:'name',title:'姓名'},
                {field:'phone',title:'手机号'},
                {field:'birth',title:'生日'},
                {field:'deptName',title:'所属部门'},
                {field:'flag',title:'员工状态',templet:function (d) {
                        if (d.flag == 1){
                            return "<b style='color:green'  >在职</b>";
                        }else if (d.flag == 2){
                            return "<b style='color:red'>已离职</b>";
                        }
                    }},
                {field:'createTime',title:'创建时间'},
                {title:'操作',toolbar:'#rowBtns',fixed:'right',width:200},
            ]],
        });

        $("#searchBtn").click(function () {
            var name = $("#name").val();
            var birth = $("#birth").val();
            var deptId = $("#deptId").val();
            var flag = $("#flag").val();
            t.reload({
                where:{
                    name:name,
                    birth:birth,
                    deptId:deptId,
                    name:name,
                    flag:flag,
                    page:1
                }
            });
        });

        table.on("toolbar(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'add'){
                add();
            }
        })

        function add() {
            layer.open({
                title:'编辑',
                type:1,
                content:$("#editTpl").html(),
                area:['360px','400px'],
                success:function (layero,index) {
                    //初始化生日组件
                    laydate.render({elem:'#editBirth',format:'yyyy-MM-dd'});
                    //初始化部门
                    initDept("#editDeptId",{flag:1});
                    form.on('submit(submitBtnFilter)',function (d) {
                        var data = d.field;
                        //更新表格
                        updateTable("comp/user/add.do",data,index);

                        return false;//阻止表单默认提交
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    $("#submitBtn").click();
                }
            })
        }

        table.on("tool(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'del'){
                del(d.data);
            }else if(event = "role"){
                roles(d.data);//为用户分配角色
            }
        })

        function del(data) {
            layer.confirm("确定离职吗?",function (index) {
                updateTable("comp/user/delete.do",{id:data.id},index);
            });
        }

        function roles(data){
            layer.open({
                title:'分配角色',
                type:1,
                content:$("#editRole").html(),
                area:['320px','320px'],
                success:function (layero,index) {
                    //公司所有角色
                    var allRole = null;
                    //用户所有的角色Id
                    var userRoleIds = null;
                    $.ajax({
                        url:"${pageContext.request.contextPath}/comp/role/list.do",
                        async:false,//同步请求
                        success:function (rs) {
                            if (rs.code != 200){
                                layer.msg(rs.msg);
                                return false;
                            }
                            allRole = rs.data;
                        }
                    });
                    //获取用户所有角色ID
                    $.ajax({
                        url:"${pageContext.request.contextPath}/comp/user/userRoles.do?id="+data.id,
                        async:false,//同步请求
                        success:function (rs) {
                            if (rs.code != 200){
                                layer.msg(rs.msg);
                                return false;
                            }
                            userRoleIds = rs.data;
                        }
                    });
                    console.log(allRole);
                    console.log(userRoleIds);
                    //需要追加的模板
                    var tpl = '<div class="layui-input-inline" style="width: 120px;height: 30px">' +
                        '<input type="checkbox"   name="rId" title="$title$" lay-skin="primary" value="$rId$" />' + '</div>';
                    var item = $("#rolesItem");
                    var html = "";
                    $.each(allRole,function (index,value) {
                        //角色名称
                        var roleName = value.name;
                        //角色Id
                        var roleId = value.id;
                        //替换名称
                        var nameTpl  = tpl.replace('$title$',roleName);
                        //替换角色ID
                        var checkTpl = nameTpl.replace('$rId$',roleId);
                        html = html +  checkTpl;
                    });
                    item.append(html);
                    //通过for循环 设置 对应的checkbox 为选中
                    $.each(userRoleIds,function (index,value) {
                        //设置 checkbox 为选中
                        $("[value='"+value+"']").attr("checked",true);
                    });
                    form.render("checkbox");
                    form.on('submit(submitBtnFilter)',function (d) {
                        var param = $(d.form).serialize();
                        param = "uId="+data.id+"&"+param;
                        //更新表格
                        updateTable("comp/user/editRole.do",param,index);
                        return false;//阻止表单默认提交
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    $("#submitBtn").click();
                }
            })
        }

        function  updateTable(url,data,index) {
            $.post("${pageContext.request.contextPath}/"+url,data,function (rs) {
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                layer.msg(rs.msg);
                $("#searchBtn").click();
                layer.close(index);
            });
        }
    });
</script>
</body>
</html>
